<template>
  <div>
    <div class="head">
      <a class="back" @click="doGoback">
        <img src="../../../../assets/1first/5-8搜索结果/back.png" alt="">
      </a>
      <div>健康美味兼得的布尔本</div>
      <a class="share">
        <img src="../../../../assets/1first/修炼秘籍/share.png" alt="">
      </a>
    </div>
    <div class="topDiv">
      <img src="../../../../assets/1first/超级热卖/jiankangbuerben.png" alt="">
      <p>日本著名糕点品牌Bourbon布尔本，成立于1924年,是日本零食十强之一。制作的曲奇和糕点系列，品质 远胜于欧洲传统西点，做工研究、精致、高贵、时尚、健康是Bourbon一贯的严谨作风，其北日本系列礼盒更是夺得了销售冠军，相当受欢迎。</p>
    </div>
    <div class="series" v-for="item in 2">
      <div class="serDiv">
        <div class="ser1">
          <div class="imgDiv">
            <img src="../../../../assets/1first/超级热卖/quqibinggantu.png" alt="">
          </div>
          <div class="flexDiv">
            <h3>最受欢迎曲奇礼盒系列</h3>
            <p>日本本土国内受欢迎的曲奇点心，浓浓的牛油味，饼干的酥脆和可可牛奶的美妙结合，咬下去，满满幸福感。礼盒装有三种不同口味，一盒里约54枚，布尔本家产品，礼盒包装无论是送人还是留着自己下午茶，都非常合适。</p>
          </div>
        </div>
      </div>
      <div class="kitty clearfix">
        <div class="fl kittyDiv" v-for="item in 4">
          <div class="imgKitty">
            <img src="../../../../assets/1first/超级热卖/kitty.png" alt="">
          </div>
          <div class="descKitty">
            <p>BOURBON布尔本hello kitty黄油曲奇礼盒54枚</p>
            <p class="price">¥12.90</p>
            <div class="btnBuy">立即购买</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      doGoback() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  .head{
    position: relative;
    text-align: center;
    background: #e53e42;
    color: #fff;
    line-height: 2.13rem;
    font-size: 0.8rem;
  }
  .back{
    position: absolute;
    left: 0;
    margin-left: 0.44rem;
  }
  .back>img{
    width: 0.51rem;
  }
  .share{
    position: absolute;
    right: 0;
    margin-right: 0.44rem;
    top: 0;
  }
  .share>img{
    width: 0.8rem;
  }
  .topDiv{
    padding-bottom: 0.44rem;
    background: #f2f2f2;
  }
  .topDiv img{
    width: 100%;
  }
  .topDiv p{
    padding: 0.64rem 1.04rem 0.87rem 0.44rem;
    background: #ffcd2c;
    color: #4d4d4d;
    font-size: 0.62rem;
    line-height: 0.8rem;
  }
  .serDiv{
    background: #fdf3f1;
    padding: 0.44rem;
  }
  .ser1{
    background: #fff;
    padding: 0.44rem;
    display: flex;
  }
  .imgDiv{
    width: 4.91rem;
    flex: none;
  }
  .imgDiv img{
    width: 100%;
  }
  .flexDiv{
    flex: 1;
    padding: 0.44rem;
  }
  .flexDiv h3{
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4e1f1d;
    margin-bottom: 0.67rem;
  }
  .flexDiv p{
    font-family: MicrosoftYaHei;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }
  .kitty{
    padding: 0.22rem;
  }
  .kittyDiv{
    margin: 0 0.2rem;
    background: #fff;
    border: 1px solid #ccc;
    width: 46.5%;
  }
  .imgKitty{
    padding: 1.02rem 0 ;
    width: 3.82rem;
    margin: 0 auto;
  }
  .imgKitty img{
    width: 100%;
  }
  .descKitty{
    border-top: 1px solid #ccc;
    padding: 0.44rem;
  }
  .descKitty p{
    font-family: SimHei;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
    word-wrap:break-word;
  }
  .descKitty .price{
    color: #e53e42;
    text-align: center;
    margin-top: 0.33rem;
  }
  .btnBuy{
    background: #e53e42;
    border-radius: 0.33rem;
    text-align: center;
    color: #fff;
    line-height: 0.67rem;
    width: 4.84rem;
    margin: 0.4rem auto 0;

  }
</style>
